﻿<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>hCalendar 14 -  HTML5 time element</title>
  
  <link rel="stylesheet" href="../css/uftestsuite.css" type="text/css" />
  <link rel="stylesheet" href="../../testrunner/css/testrunner.css" type="text/css" />
 
  	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<link rel="stylesheet" href="css/ie.css">
	<![endif]-->
      
</head>
<body>
    
    <div class="test-fixture">
    
    <footer>
    	<a href="../"><img border="0" id="testsuite-image" alt="Microformats test suite" src="../images/testsuite.gif" /></a>
    </footer>
    
    <h1 class="summary">hCalendar 14 - HTML5 time element</h1>
    <p class="description">This page was design to test the use of the 
	<a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-time-element">HTML5 time element</a> for microformat datetime structures such as dtstart and dtend</p>
    <p>From: <a href="default.htm"><span class="format">hCalendar</span> test suite 1.0</a></p>
    <p class="author vcard">
        Author: <a class="url fn" href="http://www.glennjones.net/">Glenn Jones</a> 
    </p>
    
    <input id="unittestbutton" type="button" onclick="microformatsTestRunner.displayTestOptionForm()" value="Unit Test Runner">

    <p>Tests:</p>
    <table id="assetTable" cellpadding="0" cellspacing="0">
	    <thead>
	        <tr>
	            <th>Test</th>
	            <th>Result</th>
	            <th>Comment</th>
	        </tr>
	    </thead>
	    <tbody>
	    
	         <tr class="assert">
	            <td class="test">vevent[0].dtstart</td>
	            <td class="result">IsEqualToISODate("2008-08-18")</td>
	            <td class="comment">The dtstart from a HTML5 time element</td>
	        </tr>
	        
	         <tr class="assert">
	            <td class="test">vevent[1].dtend</td>
	            <td class="result">IsEqualToISODate("2008-08-19")</td>
	            <td class="comment">The dtend from a HTML5 time element</td>
	        </tr>
	        
	         <tr class="assert">
	            <td class="test">vevent[2].dtstart</td>
	            <td class="result">IsEqualToISODate("2008-08-18T15:00:00-01")</td>
	            <td class="comment">The dtstart from a HTML5 time element</td>
	        </tr>
	        
	         <tr class="assert">
	            <td class="test">vevent[2].dtend</td>
	            <td class="result">IsEqualToISODate("2008-08-18T16:00:00-01")</td>
	            <td class="comment">The dtend from a HTML5 time element</td>
	        </tr>

	        <tr class="assert">
	            <td class="test">vevent[3].dtstart</td>
	            <td class="result">IsEqualToISODate("2007-05-01")</td>
	            <td class="comment">The dtstart from a HTML5 time element</td>
	        </tr>
	        
	        <tr class="assert">
	            <td class="test">vevent[4].dtstart</td>
	            <td class="result">IsEqualToISODate("2007-05-01T21:30")</td>
	            <td class="comment">The dtstart from a HTML5 time element</td>
	        </tr>
	        
	        <tr class="assert">
	            <td class="test">vevent[5].dtstart</td>
	            <td class="result">IsEqualToISODate("2007-05-01T21:30Z")</td>
	            <td class="comment">The dtstart from a HTML5 time element</td>
	        </tr>

	        <tr class="assert">
	            <td class="test">vevent[6].dtstart</td>
	            <td class="result">IsEqualToISODate("2007-05-01T21:30:00Z")</td>
	            <td class="comment">The dtstart from a HTML5 time element</td>
	        </tr>

	        <tr class="assert">
	            <td class="test">vevent[7].dtstart</td>
	            <td class="result">IsEqualToISODate("2007-05-01T21:30+08:00")</td>
	            <td class="comment">The dtstart from a HTML5 time element</td>
	        </tr>

	        <tr class="assert">
	            <td class="test">vevent[8].dtstart</td>
	            <td class="result">IsEqualToISODate("2007-05-01T21:30:00+08:00")</td>
	            <td class="comment">The dtstart from a HTML5 time element</td>
	        </tr>

	        <tr class="assert">
	            <td class="test">vevent[9].dtstart</td>
	            <td class="result">IsEqualToISODate("2007-05-01T21:30:00.0150")</td>
	            <td class="comment">The dtstart from a HTML5 time element</td>
	        </tr>

	        <tr class="assert">
	            <td class="test">vevent[10].dtstart</td>
	            <td class="result">IsEqualToISODate("2007-05-01T21:30:00.0150+08:00")</td>
	            <td class="comment">The dtstart from a HTML5 time element</td>
	        </tr>

	        <tr class="assert">
	            <td class="test">vevent[11].dtstart</td>
	            <td class="result">IsEqualTo("08:00")</td>
	            <td class="comment">The dtstart from a HTML5 time element</td>
	        </tr>

	        
	
	    </tbody>
    </table> 
    
    
    <p>History:</p>
    <ul>
    	<li class="history vevent">
	        <span class="summary">Updated</span>: <time class="dtstart" datetime="2008-08-16">16 August 2010</time> 
	        <span class="description">by Glenn Jones - Corrected day DRY violation where datetime attr differ from element content</span>
	    </li>

	    <li class="history vevent">
	        <span class="summary">Created</span>: <time class="dtstart" datetime="2008-08-14">14 August 2010</time> 
	        <span class="description">by Glenn Jones</span>
	    </li>
    </ul>
    
    
    
    </div>
  
    <div id="uf">
		<!-- This may not be the best semantic use of HTML element -->
			
		<!-- 0  -->	
		<div class="vevent">
		   <span class="summary">Web Conference</span> - 
		   <time class="dtstart">2008-08-18</time> to 
		   <time class="dtend">2008-08-19</time>
		   <div><a class="url uid" href="http://0.example.com">0.example.com</a></div>
		</div>
		
		<!-- 1  -->
		<div class="vevent">
		   <span class="summary">Web Conference</span> - 
		   <time class="dtstart" datetime="2008-08-18">18th August 2008</time> to 
		   <time class="dtend" datetime="2008-08-19">19th August 2008</time>
		   <div><a class="url uid" href="http://1.example.com">1.example.com</a></div>
		</div>
		
		
		<!-- 2  -->
		<div class="vevent">
		   <span class="summary">HTML5 introduction</span> at Web Conference - 
		   <time class="dtstart" datetime="2008-08-18T15:00:00-01">15:00</time> to 
		   <time class="dtend" datetime="2008-08-18T16:00:00-01">16:00</time> on 18th August 2008
		   <div><a class="url uid" href="http://2.example.com">2.example.com</a></div>
		</div>

		
		<!-- 3  -->
		<div class="vevent">
			<div class="summary">Web Standards meet up</div>
			<div>Starts: <time class="dtstart" datetime="2007-05-01">1 May 2007</time></div>

			<div><a class="url uid" href="http://3.example.com">3.example.com</a></div>
		</div>

		<!-- 4  -->
		<div class="vevent">
			<div class="summary">Web Standards meet up</div>
			<div>Starts: <time class="dtstart" datetime="2007-05-01T21:30">1 May 2007</time>></div>

			<div><a class="url uid" href="http://4.example.com">4.example.com</a></div>
		</div>
		
		<!-- 5  -->
		<div class="vevent">
			<div class="summary">Web Standards meet up</div>
			<div>Starts: <time class="dtstart" datetime="2007-05-01T21:30Z">1 May 2007</time></div>
			<div><a class="url uid" href="http://5.example.com">5.example.com</a></div>

		</div>
		
		<!-- 6  -->
		<div class="vevent">
			<div class="summary">Web Standards meet up</div>
			<div>Starts: <time class="dtstart" datetime="2007-05-01T21:30:00Z">1 May 2007</time></div>
			<div><a class="url uid" href="http://6.example.com">6.example.com</a></div>
		</div>

		<!-- 7  -->
		<div class="vevent">
			<div class="summary">Web Standards meet up</div>
			<div>Starts: <time class="dtstart" datetime="2007-05-01T21:30+08:00">1 May 2007</time></div>
			<div><a class="url uid" href="http://7.example.com">7.example.com</a></div>
		</div>

		
		<!-- 8  -->
		<div class="vevent">
			<div class="summary">Web Standards meet up</div>
			<div>Starts: <time class="dtstart" datetime="2007-05-01T21:30:00+08:00">1 May 2007</time></div>
			<div><a class="url uid" href="http://8.example.com">8.example.com</a></div>
		</div>

		<!-- 9  -->
		<div class="vevent">
			<div class="summary">Web Standards meet up</div>
			<div>Starts: <time class="dtstart" datetime="2007-05-01T21:30:00.0150">1 May 2007</time></div>
			<div><a class="url uid" href="http://9.example.com">9.example.com</a></div>
		</div>

		<!-- 10  -->
		<div class="vevent">
			<div class="summary">Web Standards meet up</div>
			<div>Starts: <time class="dtstart" datetime="2007-05-01T21:30:00.0150+08:00">1 May 2007</time></div>
			<div><a class="url uid" href="http://10.example.com">10.example.com</a></div>
		</div>
		
		
		<!-- 11  -->
		<div class="vevent">
			<div class="summary">Web Standards meet up</div>
			<div>Starts: <time class="dtstart">08:00</time></div>
			<div><a class="url uid" href="http://10.example.com">11.example.com</a></div>
		</div>



    </div>
    
    <footer>
        <a rel="license" href="../license.txt">Some rights reserved</a>
    </footer>
        
  
</body>

</html>